<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结算</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/cart-checkout.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_pc_init.css">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../css/checkout.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="header-nav">
                <h1 class="header-logo">
                    <a href="index.html">
                        <img src="../images/logo.png" alt="21cake logo" />
                    </a>
                </h1>
                <ul class="nav-box">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="cake.html" target="_self">蛋糕</a></li>
                    <li><a href="bread.html" target="_self">面包</a></li>
                    <li><a href="ice-cream.html" target="_self">冰淇淋</a></li>
                    <li><a href="coffee-tea.html" target="_self">咖啡下午茶</a></li>
                    <li><a target="_self">咖啡全国送</a></li>
                    <li><a target="_self">企业专区</a></li>
                </ul>
                <div class="right-city-user">
                    <a class="header-app app-download">APP下载</a>
                    <div class="current-city">上海<i></i></div>
                    <a class="header-message">消息</a>
                    <span class="not-login"><a href="login.html">登录</a>/<a href="register.html">注册</a></span>
                    <a class="header-user">
                        <img src="../images/user-img.png" alt="21cake user icon" />
                    </a>
                    <a href="cart.html" class="header-cart">
                        <i></i>
                    </a>
                    <ul class="current-city-list  header-select">
                        <li><a href="javascript:void(0);" class="city-id-1">上海</a></li>
                        <li><a href="javascript:void(0);" class="city-id-2">北京</a></li>
                        <li><a href="javascript:void(0);" class="city-id-3">天津</a></li>
                        <li><a href="javascript:void(0);" class="city-id-4">杭州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-5">无锡</a></li>
                        <li><a href="javascript:void(0);" class="city-id-6">苏州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-7">广州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-8">深圳</a></li>
                    </ul>
                    <ul class="header-user-list  header-select">
                        <li><a target="_blank">我的订单</a></li>
                        <li><a target="_blank">我的优惠券</a></li>
                        <li><a target="_blank">我的纪念日</a></li>
                        <li><a class="logout" target="_self">退出登录</a></li>
                    </ul>
                    <ul class="message-list-header  header-select">
                        <li><a target="_blank">通知</a></li>
                        <li><a target="_blank">物流</a></li>
                    </ul>
                    <dl class="app-list  header-select">
                        <dt>
                            <img src="../images/footer-erweima.png" alt="下载APP" />
                        </dt>
                        <dd>下载享更多优惠</dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>

    <div class="content-box">
        <form method="get">
            <div class="delivery-info">
                <h3 class="delivery-info-title">配送信息</h3>
                <div class="delivery-info-content">
                    <div class="cart-address-button"><i></i>添加新的地址</div>
                    <!-- <div class="cart-address-button" style="display:none;"><i></i>选择新地址</div> -->
                    <div class="delivery-address" style="display: none;">
                        <div class="left-info">
                            <h3></h3>
                            <span class="phone-number"></span>
                            <span class="address"></span>
                        </div>
                        <div class="right-button">
                            <a href="#">切换地址</a>
                            <a href="#">+添加新地址</a>
                        </div>
                    </div>

                    <div class="delivery-time">
                        <span>配送时间</span>
                        <input type="text" class="hasDatepicker" id="datetimepicker" autocomplete="off" placeholder="请选择配送日期">
                        <select name="ship_time_scope" id="ship-time-scop" style="color: rgb(104, 64, 41);">
                            <option value="">时间</option>
                        </select>
                        <span>配送时间受路况影响，有前后15分钟误差，请谅解</span>
                    </div>
                    <div class="delivery-mode">
                        <span>配送方式</span>
                        <label><input type="radio" name="shipping_id" value="1" checked="checked">&nbsp;21cake配送</label>
                        <label><input type="radio" name="shipping_id" value="2">&nbsp;站点自提</label>
                    </div>
                </div>
            </div>

            <div class="cart-goods-info cart-area cart-list">
                <ul class="thead-ul">
                    <li class="goods-ti">商品</li>
                    <li class="birthday-card-ti">生日牌</li>
                    <li class="unit-Price">单价</li>
                    <li class="number-ti">数量</li>
                    <li class="money-ti" colspan="2">金额</li>
                </ul>
                <div class="tbody-ul">
                    <table>
                        <!-- 普通商品开始 -->
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="leave-message">
                <label>订单留言：</label>
                <textarea placeholder="请留下您对订单或商品的特殊要求，200字以内"></textarea>
            </div>

            <div class="payment-info">
                <div class="left-pay">
                    <h3>支付方式</h3>
                    <ul class="pay-ways">
                        <li>
                            <a href="#" class="payment-item active">在线支付</a>
                        </li>
                    </ul>
                </div>
                <div class="right-pay">
                    <div class="pay-unmber">
                        <ul>
                            <li><span>商品金额</span><span></span></li>
                            <!-- <li><span>配送费</span><span>¥ 0.00</span></li> -->
                            <!-- <li><span>优惠抵扣</span><span class="redco">- ¥ 0.00</span></li>
                            <li><span>果实币抵扣</span><span class="redco">- ¥ 0.00</span></li>
                            <li><span>代金卡抵扣</span><span class="redco">- ¥ 0.00</span></li> -->
                        </ul>
                    </div>
                    <div class="total-amount">
                        您总共需要支付<span id="total-amount"></span>
                    </div>
                    <input type="submit" class="go-pay" name="go-pay" value="下单结算">
                    <div id="user-info-confirm">
                        <div class="user-info"><span></span></div>
                        <span></span>
                    </div>
                </div>
            </div>
    </div>
    </form>
    </div>

    <div id="edit-address-panel">
        <div class="pop-window">
            <h1 class="add-adress-title">添加地址</h1>
            <div class="address-choose">
                <form method="get" id="add-address-from">
                    <ul>
                        <li>
                            <label class="label-title"><span>*</span>所在地区：</label>
                            <div class="select-city">
                                <div class="city-choose">请选择</div>
                                <img src="../images/bottom.png" alt="">
                            </div>
                            <div class="city-list">
                                <div class="city-select">
                                    <div class="city-name">
                                        <select name="city" id="new-input-city-select" placeholder="请选择">
                                            <option value="上海" selected="selected">上海</option>
                                            <option value="北京">北京</option>
                                            <option value="天津">天津</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="city-list-show">
                                    <div id="ciy-select">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <label class="label-title"><span>*</span>详细地址</label>
                            <div class="adress-detail">
                                <input type="text" placeholder="请填写街道，门牌号等" id="adressDetailEdit" autocomplete="off"
                                    name="house_number">
                            </div>
                        </li>
                        <li>
                            <div class="customer-msg">
                                <div class="user-msg-left">
                                    <label class="label-title"><span>*</span>收货人</label>
                                    <div class="user-msg-left-input">
                                        <input type="text" name="name" id="input-name" placeholder="收货人姓名">
                                    </div>
                                </div>
                                <div class="user-msg-right">
                                    <label class="label-title"><span>*</span>手机号码</label>
                                    <div class="user-msg-left-input">
                                        <input type="text" name="mobile" id="consignee-mobile" placeholder="收货人手机">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><span class="error-msg"></span></li>
                        <li>
                            <div class="bottom-btn">
                                <div class="button-right">
                                    <a href="javascript:;" id="add-address-cancel-btn">取消</a>
                                    <a href="javascript:;" id="action-address-confirm-btn">确定</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

    <div id="select-address-panel" style="display: none;">
        <!-- 弹框背景end -->
        <div class="bomb-box select-address" style="margin-top: 55.68px;">
            <div class="bomb-box-title">
                <h4>请选择收货地址</h4>
                <i id="close-icon"></i>
            </div>
            <div class="bomb-box-content">
                <div class="select-address-box">
                    <ul id="address-list">
                    </ul>
                </div>
                <div class="bomb-box-footer">
                    <div class="use-button">
                        <a href="#" id="selected-btn">使用</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <footer>
        <div class="footer">
            <img class="footer-logo" src="../images/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a>联系我们</a>
                <span>|</span>
                <a>订购帮助</a>
                <span>|</span>
                <a>企业合作</a>
                <span>|</span>
                <a>生产经营资质</a>
                <span>|</span>
                <a>公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../images/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima">
                        <img src="../images/erweima.png">
                    </div>
                    <img src="../images/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="../images/footer-erweima.png">
                    </div>
                    APP
                </a>
            </div>

            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00）</span>
                <span>客服电话：021-23099721（全国） | kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>
    </footer>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-datetimepicker.js"></script>
<script src="../js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../js/header.js"></script>
<script src="../js/login.js"></script>
<script src="../js/cookie.js"></script>
<script>
    //头部的显隐事件
    header();
    //登录事件
    login();
    //bs日期选择器
    var date = new Date();
    var temp = new Date();
    temp.setFullYear(date.getFullYear());
    temp.setMonth(date.getMonth() + 1);
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: true,
        startView: 2,
        minView: 2,
        startDate: new Date(),
        endDate: temp,
        maxView: 2,
        language: 'zh-CN',
        initialDate: new Date(),
        bootcssVer: 3
    });

    if (!getCookie("t_cake_userId")) {
        location.href = "login.html";
    }

    $(".hasDatepicker").change(function () {
        $("#ship-time-scop").html(`<option value="">时间</option>
                            <option value="14:00-14:30">14:00-14:30</option>
                            <option value="14:30-15:00">14:30-15:00</option>
                            <option value="15:00-15:30">15:00-15:30</option>
                            <option value="15:30-16:00">15:30-16:00</option>
                            <option value="16:00-16:30">16:00-16:30</option>
                            <option value="16:30-17:00">16:30-17:00</option>
                            <option value="17:00-17:30">17:00-17:30</option>
                            <option value="17:30-18:00">17:30-18:00</option>
                            <option value="18:00-18:30">18:00-18:30</option>
                            <option value="18:30-19:00">18:30-19:00</option>
                            <option value="19:00-19:30">19:00-19:30</option>
                            <option value="19:30-20:00">19:30-20:00</option>
                            <option value="20:00-20:30">20:00-20:30</option>
                            <option value="20:30-21:00">20:30-21:00</option>
                            <option value="21:00-21:30">21:00-21:30</option>
                            <option value="21:30-22:00">21:30-22:00</option>`);
    });

    //添加地址
    $(".cart-address-button").click(function () {
        $("#edit-address-panel").show();
    });
    $(".right-button a").eq(1).click(function () {
        $("#edit-address-panel").show();
    });

    //切换地址
    $(".right-button a").eq(0).click(function () {
        $("#select-address-panel").show();
        addressData();
    });

    //点击付款
    $(".go-pay").click(function () {
        $(".cart-object-item").each(function (index, item) {
            $.ajax({
                type: "get",
                url: "../php/delete_checkout.php",
                data: {
                    userid: getCookie("t_cake_userId"),
                    goodsid: $(item).attr("data-goodsid")
                },
                dataType: "json",
                success: function (obj) {
                }
            });
            $.ajax({
                type: "get",
                url: "../php/delete_cart.php",
                data: {
                    userid: getCookie("t_cake_userId"),
                    goodsid: $(item).attr("data-goodsid")
                },
                dataType: "json",
                success: function (obj) {
                }
            });
        });
    });

    addressData();
    function addressData() {
        $.ajax({
            type: "get",
            url: "../php/addressdata.php",
            data: {
                userid: getCookie("t_cake_userId")
            },
            dataType: "json",
            success: function (list) {
                if (list[0]) {
                    $(".cart-address-button").hide();
                    $(".delivery-address").show();
                    $(".left-info h3").html(list[0]["name"]);
                    $(".left-info .phone-number").html("<i></i>" + list[0]["tel"]);
                    $(".left-info .address").html("<i></i>" + list[0]["area"] + "/" + list[0]["address"]);
                    let html = "";
                    for (var attr in list) {
                        let name = list[attr]["name"];
                        let area = list[attr]["area"];
                        let userid = list[attr]["userid"];
                        let address = list[attr]["address"];
                        let tel = list[attr]["tel"];

                        html += `
                        <li class="address-item" onclick="addressInfoClick(this)">
                            <div class="left-info">
                                <h3>${name}</h3>
                                <span class="phone-number"><i></i>${tel}</span>
                                <span class="address"><i></i>${area}/${address}</span>
                            </div>
                        </li>
                        `;
                    }
                    $("#address-list").html("");
                    $("#address-list").html(html);
                    $("#address-list").append(`<li>
                            <div class="left-info address-item-add">＋添加新地址</div>
                        </li>`);
                    $(".address-item-add").click(function () {
                        $("#select-address-panel").hide();
                        $("#edit-address-panel").show();
                    });
                    $("#close-icon").click(function () {
                        $("#select-address-panel").hide();
                    });
                    $(".address-item").eq(0).addClass("active");
                    $("#selected-btn").click(function () {
                        $(".delivery-address h3").html($("#address-list .active h3").html());
                        $(".delivery-address .phone-number").html($("#address-list .active .phone-number").html());
                        $(".delivery-address .address").html($("#address-list .active .address").html());
                        $("#user-info-confirm .user-info").html($("#address-list .active h3").html() + "<span>" + $("#address-list .active .phone-number").html() + "</span>");
                        $("#user-info-confirm>span").html($("#address-list .active .address").html());
                        $("#select-address-panel").hide();
                    });
                    $("#user-info-confirm .user-info").html($(".delivery-address h3").html() + "<span>" + $(".delivery-address .phone-number").html() + "</span>");
                    $("#user-info-confirm>span").html($(".delivery-address .address").html());
                } else {
                    $(".cart-address-button").show();
                    $(".delivery-address").hide();
                }
            }
        });
    }
    function addressInfoClick(obj) {
        $(".address-item").removeClass("active");
        $(obj).addClass("active");
    }

    function seleceCity() {
        $.ajax({
            type: "get",
            url: "http://api.yytianqi.com/citylist/id/2",
            dataType: "json",
            success: function (obj) {
                let areaList = obj["list"].filter(function (item) {
                    return item["name"] === $("#new-input-city-select").val();
                })[0]["list"];
                $("#ciy-select").html("");
                for (var attr in areaList) {
                    $("#ciy-select").append(`<span class="country-name-list" onclick="cityClick(this)">${areaList[attr]["name"]}</span>`);
                }
            }
        });
    }

    function cityClick(obj) {
        $(".city-choose").html($("#new-input-city-select").val() + "/" + $(obj).html());
        $(".city-list").hide();
    }

    $(".select-city").click(function () {
        $(".city-list").show();
        seleceCity();
        //当省份下拉框改变时
        $("#new-input-city-select").change(function () {
            seleceCity();
        });
    });

    $("#add-address-cancel-btn").click(function () {
        $("#edit-address-panel").hide();
    });
    $("#action-address-confirm-btn").click(function () {
        if ($(".city-choose").html() === "请选择") {
            $(".error-msg").html("请选择区域");
            return;
        } else if ($("#adressDetailEdit").val() === "") {
            $(".error-msg").html("请填写详细信息");
            return;
        } else if ($("#input-name").val() === "") {
            $(".error-msg").html("请填写收货人姓名");
            return;
        } else if ($("#consignee-mobile").val() === "" && !/^1[3456789][0-9]{9}$/i.test($("#consignee-mobile").val())) {
            $(".error-msg").html("请填写手机号码");
            return;
        }else if (!/^1[3456789][0-9]{9}$/i.test($("#consignee-mobile").val())) {
            $(".error-msg").html("请填写正确的手机号码");
            return;
        }
        $(".error-msg").html("");
        address();
        $(".delivery-address").show();
        $(".cart-address-button").hide();
        addressData();
    });

    function address() {
        $.ajax({
            type: "get",
            url: "../php/address.php",
            data: {
                userid: getCookie("t_cake_userId"),
                name: $("#input-name").val(),
                area: $(".city-choose").html(),
                tel: $("#consignee-mobile").val(),
                address: $("#adressDetailEdit").val()
            },
            dataType: "json",
            success: function (obj) {
                $("#edit-address-panel").hide();
                $(".cart-address-button").hide();
            }
        });
    }

    let html = "";
    $.ajax({
        type: "get",
        url: "../php/order.php",
        data: {
            userid: getCookie("t_cake_userId")
        },
        dataType: "json",
        success: function (list) {
            for (var attr in list) {
                let id = list[attr]["id"];
                let goodsid = list[attr]["goodsid"];
                let goodsnum = list[attr]["goodsnum"];
                let birthday_card = list[attr]["birthday_card"];
                let measure = list[attr]["measure"];
                let mount = list[attr]["mount"];
                let goods_name = list[attr]["goods_name"];
                let goods_smallimg = list[attr]["goods_smallimg"];
                let goodsprice = list[attr]["goodsprice"];
                let goods_type = list[attr]["goods_type"];
                let measure_id = list[attr]["measure_id"];
                let total = goodsprice * goodsnum;
                if (birthday_card === "选择生日牌") {
                    birthday_card = "";
                }

                html += `
                <tr class="cart-object-item scene_area" data-goodsid="${goodsid}">
                    <td class="goods-img">
                        <a href="goods-details.html?goods_id=${goodsid}" target="_blank">
                            <img src="../images/${goods_smallimg}">
                        </a>
                    </td>
                    <td class="goods-cake">
                        <div>
                            <h4 class="cart-title">
                                <a href="goods-details.html?goods_id=${goodsid}" target="_blank">${goods_name}</a>
                            </h4>
                            <span class="goods-spec">规格：<span>${measure}</span></span>
                            <span class="goods-laid"><i></i>${mount}</span>
                        </div>
                    </td>
                    <td class="select-birthday-td" data-type="${goods_type}">
                        ${birthday_card}
                    </td>
                    <td class="cart-unit-Price">¥${goodsprice}</td>
                    <td class="number-li">
                            ${goodsnum}
                    </td>
                    <td class="money">￥${total.toFixed(2)}</td>
                </tr>
                        <!-- 普通商品结束 -->
                `;
            }
            $(".tbody-ul tbody").prepend(html);
            $("[data-type]:not([data-type='蛋糕'])").html("");
            let sumTotal = 0;
            $(".money").each(function (index, item) {
                sumTotal += $(item).html().substring(1) * 1;
            })
            $(".pay-unmber li").eq(0).children().eq(1).html("￥" + sumTotal.toFixed(2));
            $("#total-amount").html("￥" + sumTotal.toFixed(2));
        }
    });

</script>

</html>